
.dd-bg{
	background:url(../images/bg01.jpg) no-repeat;
	background-size:100% 100%;
}
.top-img{height:2rem;text-align: center;
	position:absolute;
	bottom:77%;
	left:0;
	right:0;
	margin:0 auto;
	-webkit-transform: scale(0,0) ;
	transform: scale(0,0) ;
	-webkit-animation: caigg .3s linear .1s;
	animation: caigg .3s linear .1s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
.top-img img{width:5.6rem;height:2.1rem;}

.hong-text{
	background:url(../images/hong-text.png) no-repeat;
	background-size:100% 100%;
	text-align: center;
	padding:.1rem 0 .11rem;
	margin:0rem auto;
	width:4.5rem;
	position:absolute;
	bottom:70%;
	left:0;
	right:0;
	-webkit-transform: scale(0,0) ;
	transform: scale(0,0) ;
	-webkit-animation: caigg .4s linear .3s;
	animation: caigg .4s linear .3s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
.hong-text span{
	font-size:.26rem;
	color:#f9d110;
	
}
.caishen{text-align: center;padding:.1rem 0 0;position:absolute;bottom:26%;left:0;right:0;z-index: 2;

-webkit-transform: scale(0,0) ;
transform: scale(0,0) ;
-webkit-animation: caigg .4s linear .3s;
animation: caigg .4s linear .3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.caishen img{width:4.2rem;height:4.2rem;}

.bottom-box{
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:32%;
	z-index: 2;
}
.bottom-bg{
	height:40%;
	background:url(../images/bottom-img.png) no-repeat;
	background-size:100% 100%;
}
.bottom-text{
	height:60%;
	background:#ee3822;
}
.bottom-btn{height:.7rem; line-height:.7rem;width:2.5rem;
background:url(../images/btn-bg.png) no-repeat;
background-size:100% 100%;
text-align: center;
font-size:.32rem;
font-weight:bold;
color:#d80834;
position:relative;
top:20%;
left:0;right:0;
margin:0 auto;
}
/*.bottom-btn:active{transform: scale(1.1,1.1);-webkit-transform: scale(1.1,1.1);}*/

.btn-more{position:absolute;bottom:4%;left:0;width:100%;text-align: center;font-size:.26rem;color:#fff;}
.btn-more,.bottom-btn{-webkit-tap-highlight-color:rgba(0,0,0,0)}
* {
    -webkit-tap-highlight-color:rgba(0,0,0,0)
}

.btn-more::after{
	content:"";
	position:absolute;
	left:60%;
	top:20%;
	width:.24rem;
	height:.24rem;
	background:url(../images/more-up.png) no-repeat;
	background-size:100% 100%;
	transition:all .8s ease;
	-webkit-transition: all .8s ease;
}
.btn-more.up::after{
	top:20%;
	transform:rotate(179deg);
	-webkit-transform: rotate(179deg);
}

.rule-box{
	background:#ee3822;
	padding:.16rem .6rem .6rem;
	display:none;
}
.rule-box .warp-rules{background:#fce768;padding:.2rem;border-radius:.2rem;}
.rule-box .warp-rules .warp-rule{background:#f6ae1e;padding:.2rem;border-radius: .2rem;}
.rule-box .warp-rules .warp-rule .rule-com{background:#f7de46;padding:.3rem 0;border-radius:.2rem;}
.rule-com .weui-cells{margin-top:0;background:none;}
.rule-com .weui-cells .weui-cell{font-size:.22rem;color:#cf5c10}
.rule-com .weui-cells .number{background:#f8551a;color:#fff;display:block;border-radius:50%;padding:0 .1rem;margin-right:.1rem;}


.con-box{
	background:url(../images/thong00.png) no-repeat;
	background-size:100% 100%;
	height:5.8rem;
	-webkit-transform: scale(0,0) ;
	transform: scale(0,0) ;
	-webkit-animation: caigg .3s linear .3s;
	animation: caigg .3s linear .3s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
.con-box .tip-title{
	font-size:.26rem;
	color:#cc331d;
	text-align: center;
	padding:13% 12% 0;
	font-weight:bold;
}
.con-box .tip-img{text-align:center;padding-top:.3rem;}
.con-box .tip-img img{width:1.76rem;height:.96rem;}
.con-box .tip-text{text-align:center;color:#fdeecd;font-size:.24rem;padding-top:1.2rem;}
.con-box .bottom-btn{font-size:.28rem;margin-top:.6rem;}

.sweep-box{
	background:url(../images/thong03.png) no-repeat;
	background-size:100% 100%;
	height:8.6rem;
	
	-webkit-transform: translateY(-100%) ;
	transform: translateY(-100%) ;
	-webkit-animation: tanc .4s linear ;
	animation: tanc .4s linear ;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
.sweep-topimg{
	padding-bottom:.8rem;
	-webkit-transform: scale(0,0) ;
	transform: scale(0,0) ;
	-webkit-animation: caigg .3s linear .3s;
	animation: caigg .3s linear .3s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
.sweep-box .weixin{width:2.1rem;height:2.1rem;margin:0 auto;border-radius:.2rem;padding:.1rem;background:#fff;}
.sweep-box .sweep-text{text-align: center;font-size:.38rem;color:#fff000;padding:.4rem 0;}
.sweep-box .sweep-text img{width:3.6rem;}
.sweep-box .sweep-tip{text-align:center;font-size:.22rem;color:#fff;}

.win-box {padding:.5rem 0;}
.win-box .win-title{font-size:.26rem;color:#f2392f; padding:0 .9rem;}
.win-box .win-number{font-size:.3rem;color:#cc331d;font-weight: bold;text-align: center;padding:0 .9rem;}
.win-box .win-number span{font-size:.6rem;}
.win-box .win-bottom{text-align: right; color:#f2392f;font-size:.26rem;padding:0 .9rem;}

.win-tip{margin:1.4rem .35rem 0;border:2px dashed #ecc876;height:1.6rem;border-radius:.1rem;padding:.1rem;}
.win-tip .win-tipss{background:#fdeecd;border-radius:.1rem;height:1.6rem;overflow: auto;text-align: center;}
.win-tip .win-tipss .wtip-title{font-size:.28rem;color:#cc331d;padding:.18rem 0;}
.win-tip .win-tipss .wtip-text{font-size:.24rem;color:#7f7974;padding:0 .3rem;}

.win-style{
	-webkit-transform: scale(0,0) ;
	transform: scale(0,0) ;
	-webkit-animation: wingg .3s linear .5s;
	animation: wingg .3s linear .5s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.win-hong{position:absolute;bottom:0;left:0;}
.win-guang{
	position:absolute;bottom:0;left:0;
	/*-webkit-transition: all .5s ease;
	transition: all .5s ease;*/
	-webkit-transform: scale(0,0) ;
	transform: scale(0,0) ;
	-webkit-animation: wingg .4s linear .1s;
	animation: wingg .4s linear .1s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
@-webkit-keyframes caigg{
	0%{
		-webkit-transform: scale(0,0) ;
		transform: scale(0,0) ;
		-webkit-transform-origin: top;
		transform-origin: top;
		
	}
	80%{
		-webkit-transform: scale(1.1,1.1) ;
		transform: scale(1.1,1.1) ;
		-webkit-transform-origin: top;
		transform-origin: top;
	}
	100%{
		-webkit-transform: scale(1,1) ;
		transform: scale(1,1) ;
		-webkit-transform-origin: top;
		transform-origin: top;
	}
}
@-webkit-keyframes wingg{
	0%{
		-webkit-transform: scale(0,0) ;
		transform: scale(0,0) ;
		-webkit-transform-origin: bottom;
		transform-origin: bottom;
		
	}
	100%{
		-webkit-transform: scale(1,1) ;
		transform: scale(1,1) ;
		-webkit-transform-origin: bottom;
		transform-origin: bottom;
	}
}

.zhong-bg{position:absolute;top:-10%;left:-20%;width:140%;z-index: 2;
	-webkit-transform: scale(0,0) ;
	transform: scale(0,0) ;
	-webkit-animation: wingg .3s linear .6s;
	animation: wingg .3s linear .6s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

#leafContainer{
	position:absolute;height:100%;width:100%;overflow: hidden;
	z-index: 2;
}

#leafContainer > div {
    position: absolute;
    width: 1.10rem;
    height: 1.10rem;
    
    /* We use the following properties to apply the fade and drop animations to each leaf.
       Each of these properties takes two values. These values respectively match a setting
       for fade and drop.
    */
    -webkit-animation-iteration-count: infinite, infinite;
    -webkit-animation-direction: normal, normal;
    -webkit-animation-timing-function: linear, ease-in;
}
#leafContainer > div > img {
     position: absolute;
     width: 1.10rem;
     height: 1.10rem;

    /* We use the following properties to adjust the clockwiseSpin or counterclockwiseSpinAndFlip
       animations on each leaf.
       The createALeaf function in the Leaves.js file determines whether a leaf has the 
       clockwiseSpin or counterclockwiseSpinAndFlip animation.
    */
     -webkit-animation-iteration-count: infinite;
     -webkit-animation-direction: alternate;
     -webkit-animation-timing-function: ease-in-out;
     -webkit-transform-origin: 50% -100%;
}


/* Hides a leaf towards the very end of the animation */
@-webkit-keyframes fade
{
    /* Show a leaf while into or below 95 percent of the animation and hide it, otherwise */
    0%   { opacity: 1; }
    95%  { opacity: 1; }
    100% { opacity: 0; }
}


/* Makes a leaf fall from -300 to 600 pixels in the y-axis */
@-webkit-keyframes drop
{
    /* Move a leaf to -300 pixels in the y-axis at the start of the animation */
    0%   { -webkit-transform: translate(0px, -50px); }
    /* Move a leaf to 600 pixels in the y-axis at the end of the animation */
    100% { -webkit-transform: translate(0px, 650px); }
}

/* Rotates a leaf from -50 to 50 degrees in 2D space */
@-webkit-keyframes clockwiseSpin
{
    /* Rotate a leaf by -50 degrees in 2D space at the start of the animation */
    0%   { -webkit-transform: rotate(-50deg); }
    /*  Rotate a leaf by 50 degrees in 2D space at the end of the animation */
    100% { -webkit-transform: rotate(50deg); }
}


/* Flips a leaf and rotates it from 50 to -50 degrees in 2D space */
@-webkit-keyframes counterclockwiseSpinAndFlip 
{
    /* Flip a leaf and rotate it by 50 degrees in 2D space at the start of the animation */
    0%   { -webkit-transform: scale(-1, 1) rotate(50deg); }
    /* Flip a leaf and rotate it by -50 degrees in 2D space at the end of the animation */
    100% { -webkit-transform: scale(-1, 1) rotate(-50deg); }
}


@-webkit-keyframes tanc{
	0%{
		-webkit-transform: translateY(-100%) ;
		transform: translateY(-100%) ;
		-webkit-transform-origin: bottom;
		transform-origin: bottom;
		
	}
	50%{
		-webkit-transform: translateY(0%) scale(1.1,1.1) ;
		transform: translateY(0%) scale(1.1,1.1);
		-webkit-transform-origin: bottom;
		transform-origin: bottom;
	}
	70%{
		-webkit-transform: translateY(10%) scale(1.1,1.1);
		transform: translateY(10%) scale(1.1,1.1);
		-webkit-transform-origin: bottom;
		transform-origin: bottom;
	}
	100%{
		-webkit-transform: translateY(0%) scale(1,1);
		transform: translateY(0%) scale(1,1);
		-webkit-transform-origin: bottom;
		transform-origin: bottom;
	}
}

.gleft{
	opacity: .8;
	position:absolute;top:-.5rem;left:0;
-webkit-transform-origin: top;
		transform-origin: top;
-webkit-animation: guangLeft 2s linear .6s ;
animation: guangLeft 2s linear .6s ;

}
.gright{
	opacity: .8;
	position:absolute;top:-.5rem;right:0;
-webkit-transform-origin: top;
		transform-origin: top;
-webkit-animation: guangRight 2s linear .6s ;
animation: guangRight 2s linear .6s ;
}

@-webkit-keyframes guangLeft{
	0%{
		-webkit-transform: rotate(0deg) ;
		transform: rotate(0deg) ;
	}
	40%{
		-webkit-transform: rotate(40deg) ;
		transform: rotate(40deg) ;
	}
	41%{
		-webkit-transform: rotate(40deg) ;
		transform: rotate(40deg) ;
	}
	80%{
		-webkit-transform: rotate(0deg) ;
		transform: rotate(0deg) ;
	}
	100%{
		-webkit-transform: rotate(0deg) ;
		transform: rotate(0deg) ;
	}
}

@-webkit-keyframes guangRight{
	0%{
		-webkit-transform: rotate(0deg) ;
		transform: rotate(0deg) ;
	}
	40%{
		-webkit-transform: rotate(-40deg) ;
		transform: rotate(-40deg) ;
	}
	41%{
		-webkit-transform: rotate(-40deg) ;
		transform: rotate(-40deg) ;
	}
	80%{
		-webkit-transform: rotate(0deg) ;
		transform: rotate(0deg) ;
	}
	100%{
		-webkit-transform: rotate(0deg) ;
		transform: rotate(0deg) ;
	}
}

